<template>
  <div class="demo">
    <div class="demo-title">后缀图标</div>
    <div class="demo-content">
      <Space>
        <Cascader
          v-model:value="value1"
          style="margin-top: 1rem"
          :options="options"
          placeholder="Please select"
        >
          <template #suffixIcon><smile-outlined class="test" /></template>
        </Cascader>
        <Cascader
          v-model:value="value2"
          suffix-icon="ab"
          style="margin-top: 1rem"
          :options="options"
          placeholder="Please select"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Cascader from '@sscd/cascader';
  import type { CascaderProps } from '@sscd/cascader';
  const value1 = ref<string[]>([]);
  const value2 = ref<string[]>([]);
  const options: CascaderProps['options'] = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [{ value: 'xihu', label: 'West Lake' }],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [{ value: 'zhonghuamen', label: 'Zhong Hua Men' }],
        },
      ],
    },
  ];
</script>
